<template>
    <div id="myVideo">
            <div class="back">
            </div>
            <div class="close" v-show="playVideo" @click="videoShow()">
                <i class="el-icon-close" aria-hidden="true" ></i>
            </div>
            <video id="video"  v-show="playVideo" controls :width="width" :height="height" >
                <source src="https://vod.firstfilm.org.cn/c29c0f943a3c4daeac411ea548f36724/f9d563bbd4504795b64c8e60f99ad753-890b5ec46c931d49fa936ce995ef4051-hd.mp4" type="video/mp4">
            </video>
            <button v-show="!playVideo" id="play" @click="videoShow()">
                <i class="el-icon-caret-right"></i>
            </button>
    </div>
</template>

<script>
    export default {
        name: "MyVideo.vue",
        props:{
          width:{
              type: String,
              default: "1000em"
          },
          height: {
              type: String,
              default: "500em"
          },
        },
        data(){
            return{
                playVideo: false
            }
        },
        methods:{
            videoShow(){
                this.playVideo = !this.playVideo
            }
        },
        mounted() {
        }
    }
</script>

<style scoped>
    #myVideo{
        position: relative;
        background-color: black;
        width: 100%;
        height: 400px;
        background-size:cover;
        background-image: url("https://cdn.firstfilm.org.cn/wp-content/uploads/fly-images/13076/首页视频-1920x600-c.png");
    }
    #play{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 8vw;
        height: 8vw;
        line-height: 8vw;
        border-radius: 50%;
        background: transparent;
        color: white;
        font-size: 6vw;
        border: 1px solid white;
    }
    #video{
        z-index: 99999;
    }

    #myVideo .close{
        font-size: 2vw;
        font-weight: bold;
        color: white;
    }
    #myVideo .close:hover{
        font-size: 2vw;
        font-weight: bold;
        color: #c7c3c3;
    }
</style>
